<!DOCTYPE html>
<html	xmlns="http://www.w3c.org/1999/xhtml"
		xmlns:h="http://xmlns.jcp.org/jsf/html"
		xmlns:f="http://java.sun.com/jsf/core"
		xmlns:ui="http://java.sun.com/jsf/facelets"
		xmlns:fn="http://java.sun.com/jsp/jstl/functions"
		xmlns:p="http://primefaces.org/ui">
<h:head>
<style type="text/css">
	.column40 {width:40%;height:100%;vertical-align:top;}
	.column50 {width:50%;height:100%;vertical-align:top;}
	.column60 {width:60%;height:100%;vertical-align:top;}
	.column10 {width:10%;height:100%;vertical-align:top;}
	.column30 {width:30%;height:100%;vertical-align:top;}
	.column70 {width:70%;height:100%;vertical-align:top;}
	.column05 {width:5%;height:100%;vertical-align:top;}
	.column65 {width:65%;height:100%;vertical-align:top;}
	
	.ui-panelgrid td, .ui-panelgrid tr {
    	border-style: none !important
	}
</style>
</h:head>
<h:body>
	<h:outputScript library="primefaces" name="jquery/jquery.js"/>
	
	<p:ajaxStatus onstart="PF('status').show()" oncomplete="PF('status').hide()"/>
	<p:dialog widgetVar="status" modal="true" closable="false" resizable="false">
	      <p:graphicImage url="img/ajaxloadingbar.gif"/>
	</p:dialog>

	<p:dialog 	header="Email Detail" widgetVar="dtlDialog" 
				modal="true" showEffect="fade" hideEffect="fade" resizable="false">
		<p:outputPanel id="emailDetail" style="width:500px; height: 400px; overflow: auto;">
			<h:outputText value="#{searchBean.selectedEmail.id}" />
			<p:separator/>
			<h:outputText value="#{fn:replace(searchBean.selectedEmail.content,'\\n','&lt;br/&gt;')}" escape="false"/>
		</p:outputPanel>
	</p:dialog>
	
	<h:form id="myForm">
		<p:growl id="messages" showDetail="true" sticky="true"/>
		<p:layout fullPage="true">
			<p:layoutUnit position="north" resizable="true" size="100" style="border:0px;">
				<p:graphicImage style="height:100%;" url="img/myOrgLogo2.png"/>
			</p:layoutUnit>

			<p:layoutUnit position="center" id="myCenter" style="border:0px;">
				<p:tabView style="height:98%;border:0px;" id="myTabView">
					<p:ajax event="tabChange" listener="#{searchBean.onTabChange}" update=":myForm:myTabView:myTreeTable"/>
					
					<p:tab title="Search Email" id="searchTab">
						<ui:include src="search.xhtml" />
    				</p:tab>
				
					<p:tab title="Load Email" closable="true">
						<ui:include src="upload.xhtml" />
					</p:tab>

					<p:tab title="Generate Fake Email File" closable="true">
						<ui:include src="generate_fake_email.xhtml" />
					</p:tab>

					<p:tab title="House Keeping" closable="true" rendered="#{adminBean.admin}">
						<ui:include src="admin.xhtml" />
					</p:tab>
									
				</p:tabView>
			</p:layoutUnit>
		</p:layout>
	</h:form>
</h:body>
</html>
